<template>
  <div>
    <div>搜索 <input v-model="key" /></div>
    <div>
      类别 <input type="radio" v-model="type" value="" />全部
      <input type="radio" v-model="type" value="1" />女装
      <input type="radio" v-model="type" value="2" />男装
      <input type="radio" v-model="type" value="3" />童装
    </div>
    <div>
      <span v-for="item in info.list" :key="item.id">
        <input type="checkbox" v-model="item.checked" /> {{ item.name }}
      </span>
    </div>
    <div>ref <input ref="usernameInput" /></div>
    <button @click="getValue">dom元素取值</button>
    <div>鼠标的位置{{ x }}和{{ y }}</div>
    <div v-move>111</div>
    <Teleport to="body">
      <div id="box1">你好{{ key }}</div>
    </Teleport>

    <Suspense>
      <!-- 具有深层异步依赖的组件 -->
      <Dashboard />

      <!-- 在 #fallback 插槽中显示 “正在加载中” -->
      <template #fallback> 正在请求中Loading... </template>
    </Suspense>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue'
import { useMouse } from '../hooks/useMouse'
import Dashboard from '../components/Dashboard.vue';

let vMove = {
  mounted: (el, bindings) => {
    console.log(el)
    console.log(bindings)
  }
}

let key = ref('')
let type = ref('')
let usernameInput = ref()
let { x, y } = useMouse()

let getValue = () => {
  console.log(usernameInput.value.value)
}

let info = ref({
  list: [
    { id: 1, name: '篮球', checked: false },
    { id: 2, name: '足球', checked: false },
    { id: 3, name: '羽毛球', checked: false }
  ]
})

watch([key, type], () => {
  console.log(key.value + '和' + type.value)
})

watch(
  () => info.value.list,
  () => {
    console.log('监听list')
  },
  {
    deep: true,
    immediate: true
  }
)

watchEffect(
  () => {
    console.log('数据变化了' + type.value)
    console.log(info.value.list)
  },
  {
    deep: true
  }
)
</script>

<style></style>
